<template>
  <div>
    <h2>按钮和输入框互斥效果</h2>
    <input type="text" v-if="flag" @blur="flag = false" ref="inp">
    <button v-else @click="btn">按钮</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag:true
    }
  },
  methods: {
    btn(){
      this.flag = true
      // vue的数据驱动试图，但不会立即更新页面
      //如果希望马上获取到页面元素，可以将代码写到 this.snextTick 中
      this.$nextTick(()=>{
         this.$refs.inp.focus() //输入框获取焦点
      })
     

    }
  }
}
</script>

<style>

</style>